﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webcam demo</title>
    <link href="css/Photobooth.css" rel="stylesheet" />
    <script src="../../jq/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/photobooth_min.js"></script>
    <style>
        body {
            font-size: 12px;
            background: #333;
            font-family: 'Revalia', cursive, arial;
        }

        div#pictures, div#webcam {
            margin: 10px 0 0;
        }

        h1 {
            margin: 20px 0;
        }

        div#from {
            margin: 20px 0;
        }

        #main {
            background: #FFF;
            color: #333;
            border: 2px solid #FFF;
            box-shadow: 0 0 10px #CCC;
            padding: 10px;
            border-radius: 5px;
        }

            #main article {
                margin-bottom: 50px;
                background: #F8F8F8;
                border-radius: 5px;
                padding: 10px;
                border: 1px solid #bbb;
            }

            #main #webcam {
                margin: auto;
                width: 680px;
                height: 480px;
            }

            #main #plist {
                margin: 0 0;
                font-weight: bold;
                border-radius: 5px;
                background: #CCC;
                padding: 10px;
            }

            #main img {
                margin-bottom: 50px;
                background: #F8F8F8;
                border-radius: 10px;
                box-shadow: 0 0 5px #888;
            }

        .clear {
            clear: both;
        }

        #main ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #main .photobooth {
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <!--saturation-->
    <section id="main">
        <h1>
            HTML5 Webcam
        </h1>
        <input type="button" onclick="$('#webcam').data('photobooth').pause();" value="pause" />
        <input type="button" onclick="$('#webcam').data('photobooth').resume();" value="resume" />
        <!--<input type="button" onclick="$('#webcam').data('photobooth').destroy();" value="destroy"/>-->
        <article>
            <h1>点击下面的控制菜单，可以控制作物，色调，亮度，拍照 </h1>
            <select size="1" id="ResolutionWebcam">
                <option value="640,480">640 x 480</option>
                <option value="320,240">320 x 240</option>
                <option value="960,720">960 x 720</option>
                <option value="1120,840">1120 x 840</option>
                <option value="1360,960">1280 x 960</option>
                <option value="1600,1200">1600 x 1200</option>
                <option value="1760,1320">1760 x 1320</option>
                <option value="1856,1392">1856 x 1392</option>
            </select>
            <div id="webcam"></div>
            <div id="pictures">
                <div class="nopic">no pictures</div>
            </div>
            <div id="from">
            </div>
            <div class="clear"></div>
        </article>
    </section>
    <script>
        var webcamOption = {
            hue: 50,
            saturation: 50,
            brightness: 50
        }
        $(function () {
            $('#webcam').photobooth().on("image", function (event, dataUrl) {
                $('.nopic').hide();
                $("#pictures").append('<img src="' + dataUrl + '" >');
            });
            var con = $('#webcam').data('photobooth');
            function changewebcamOp(key, v) {
                switch (key) {
                    case "hue": con.setHueOffset(v); break;
                    case "saturation": con.setSaturationOffset(v); break;
                    case "brightness": con.setBrightnessOffset(v); break;
                    default: break;
                }
            }
            for (var key in webcamOption) {
                if (webcamOption.hasOwnProperty(key)) {
                    var v = webcamOption[key];
                    if (webcamOption[key] !== 50) {
                        $('#webcam .photobooth ul li.' + key).find(".handle").css("left", v + "px");
                        var f = (v - 50) / 100;
                        changewebcamOp(key, f);
                    }
                }
            }
            $("#ResolutionWebcam").change(function () {
                var v = $(this).val();
                var d = v.split(',');
                $('#webcam').width(d[0]).height(d[1]).data("photobooth").resize(d[0], d[1]);
            });
        });
    </script>
</body>
</html>